<template>
  <div id="login">
    <div id="login-page">
      <h2 align="center">聘途</h2>
      <div class="button-group">
        <button
          class="button1"
          :class="{ active: jobSeeking }"
          @click="setJobSeeking(true)"
        >
          我要找工作
        </button>
        <button
          class="button1"
          :class="{ active: recruiting }"
          @click="setJobSeeking(false)"
        >
          我要招聘
        </button>
      </div>
      <form @submit.prevent="submitForm">
        <div class="username">
          <input type="text" v-model="username" placeholder="请输入用户名">
        </div>
        <div class="userpassword">
          <input type="password" v-model="password" placeholder="请输入密码" />
        </div>
        <div class="code">
          <canvas
            ref="captchaCanvas"
            width="120"
            height="40"
            style="margin-left: 20px"
          ></canvas>
          <input
            type="text"
            v-model="inputCaptcha"
            style="height: 25px; margin-left: 20px"
            placeholder="请输入验证码"
          />
        </div>
        <div class="submit">
          <input type="submit" value="登录" id="bt" />
        </div>
      </form>

      <div class="manage">
        <router-link to="/manage-login">管理员登录</router-link>
      </div>
      <div class="none">
        <router-link :to="jobSeeking ? '/seekerregister' : '/companyregister'"
          >注册账号</router-link
        >
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios"; // 引入axios库
import request from "@/util/request";
export default {
  data() {
    return {
      username: "",
      password: "",
      inputCaptcha: "",
      captcha: "",
      jobSeeking: true, // 默认选中"我要找工作"
      recruiting: false, // 默认不选中"我要招聘"
      user: {
        username: "",
        password: "",
      },
    };
  },
  methods: {
    setJobSeeking(isJobSeeking) {
      this.jobSeeking = isJobSeeking;
      this.recruiting = !isJobSeeking;
    },
    generateCaptcha() {
      const canvas = this.$refs.captchaCanvas;
      const context = canvas.getContext("2d");
      context.clearRect(0, 0, 120, 40);
      const aCode = Array.from(
        "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ"
      );
      let captcha = "";
      for (let i = 0; i < 4; i++) {
        const x = 20 + i * 20;
        const y = 20 + 10 * Math.random();
        const index = Math.floor(Math.random() * aCode.length);
        const txt = aCode[index];
        captcha += txt;
        context.font = "bold 20px Arial";
        context.fillStyle = this.getColor();
        context.save();
        context.translate(x, y);
        const deg = (20 * Math.random() * Math.PI) / 180;
        context.rotate(deg);
        context.fillText(txt, 0, 0);
        context.restore();
      }
      this.captcha = captcha;
    },
    getColor() {
      var r = Math.floor(Math.random() * 256);
      var g = Math.floor(Math.random() * 256);
      var b = Math.floor(Math.random() * 256);
      return `rgb(${r},${g},${b})`;
    },
    submitForm() {
      if (this.inputCaptcha !== this.captcha) {
        alert("验证码错误");
        return;
      }
      this.user.username=this.username;
      this.user.password=this.password;
      // 根据 jobSeeking 的值选择不同的登录端点
      let url = this.jobSeeking
        ? "/hqdx/seeker/login"
        : "/hqdx/company/login";

      request
        .post(url, this.user)
        .then((response) => {
          console.log(response);
          if (response.success == true) {
            // 根据角色跳转到不同的首页
            if(this.jobSeeking){
              //用户
              sessionStorage.setItem('SeekerUser', JSON.stringify(response.data.items));
              sessionStorage.setItem('LoginSeekerState', JSON.stringify(true));//登录成功，状态记录
              this.$router.push({ name: "seekerHomePage" });
            }
            else{
              //企业
              sessionStorage.setItem('CompanyUser', JSON.stringify(response.data.items));
              sessionStorage.setItem('LoginComState', JSON.stringify(true));//登录成功，状态记录
              this.$router.push({ name: "company-posmanage" });
            }
          } else {
            alert(response.message);
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    refreshCaptcha() {
      this.generateCaptcha();
    },
  },
  mounted() {
    this.generateCaptcha();
    this.$refs.captchaCanvas.addEventListener("click", this.refreshCaptcha);
  },
};
</script>

<style scoped>
#login {
  border: rgb(255, 255, 255) solid 1px;
  height: 1000px;
  background-image: url("/public/image/登录页面背景.png");
  background-size: 100% 100%;
}

#login-page {
  opacity: 0.85;
  font-family: Arial, sans-serif;
  position: absolute;
  border: white solid 1px;
  width: 480px;
  height: 600px;
  background: rgb(243, 243, 243);
  background-size: 100% 100%;
  margin-top: 200px;
  left: 65%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.button-group {
  display: flex;
  justify-content: center;
  margin: 0 auto;
}

.button1 {
  width: 100px;
  height: 50px;
  background-color: white;
  color: rgb(81, 212, 186);
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button1:hover {
  background-color: #aababa;
}

.username {
  margin-top: 40px;
  /* text-align: center; */
}


.username input{
  width: 65%;
  height: 30px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.userpassword {
  margin-top: 40px;
  text-align: center;
}

.userpassword input {
  width: 65%;
  height: 30px;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.code {
  margin-top: 40px;
  text-align: center;
}

#bt {
  display: flex;
  margin: 0 auto;
  margin-top: 50px;
  width: 150px;
  height: 50px;
  background-color: white;
  color: rgb(17, 174, 168);
  font-size: 16px;
  border: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
}

#bt:hover {
  background-color: #aababa;
}

.button1.active {
  background-color: #aababa;
}

.none {
  margin-top: 80px;
  margin-bottom: 10px;
  float: right;
}

.manage {
  margin-top: 80px;
  margin-bottom: 10px;
  float: left;
}

#canvas {
  cursor: pointer;
  display: block;
}
</style>
